<!-- home -->
<template>
  <page-view :full="true">
    <!-- <top-bar></top-bar> -->
    <page-content class="home">
      <div class="h_header">
        <div class="h-bac"></div>
        <div class="h_t">
          <img v-if="!user || !user.user_head"
               src="../../assets/image/mine/head.png"
               alt=""
               class="h_av">
          <img v-else
               :src="user.user_head"
               alt=""
               class="h_av">
          <span class="h_log"
                v-if="user">{{user.nickname}}</span>
          <span class="h_log"
                v-else
                @click="login"><span>登录<span>/</span>注册</span></span>
        </div>
        <van-skeleton :row="2"
                      :loading="initLoading">
          <div class="h_nav">
            <div class="h_detail"
                 @click="goProduct(item)"
                 v-for="(item, index) in info.category"
                 :key="index">
              <img :src="item.category_icon"
                   alt=""
                   class="h_icon">
              <p>{{item.category_name}}</p>
            </div>
          </div>
        </van-skeleton>

      </div>
      <div class="h_conent">
        <van-pull-refresh v-model="isLoading"
                          success-text="刷新成功"
                          @refresh="onRefresh">
          <van-skeleton :row="3"
                        :loading="initLoading">
            <van-swipe class="banner-swipe"
                       :autoplay="3000"
                       indicator-color="white">
              <!-- banner -->
              <van-swipe-item @click="banner(item)"
                              v-for="(item, index) in info.banner"
                              :key="index">
                <img class="banner"
                     v-lazy="item.url" />
              </van-swipe-item>
            </van-swipe>
          </van-skeleton>

          <div v-if="initLoading || info.star.length"
               class="h_fav">
            <p class="title">
              <span>平台明星</span>
              <span><img src="../../assets/image/home/fire.png"
                     alt=""
                     class="h-fire"></span>
              <!-- <span class="h-d"><img src="../../assets/image/home/h_d.png"
                     alt=""
                     class="h-d"></span> -->
            </p>
            <van-skeleton :row="4"
                          :loading="initLoading">
              <div class="h_details"
                   @click="goBay(item)"
                   v-for="(item, index) in info.star"
                   :key="index">
                <p class="h_title">
                  {{item.name}}
                </p>
                <div class="labels">
                  <p v-for="(lab, index) in item.label"
                     :key="index"
                     class="h_type">{{lab}}</p>
                </div>
                <div class="h_pre">
                  <p class="h_count">
                    {{item.price}}
                    <span class="h_unit">CNY/台</span>
                  </p>
                  <van-progress color="#f2826a"
                                :percentage="(item.surplus/item.stock) * 100"
                                class="h_press"
                                :show-pivot="false" />
                  <p class="h_grade">剩余分数 <span>{{item.surplus}}份</span></p>
                </div>
              </div>
            </van-skeleton>
          </div>
          <div v-if="initLoading || info.recommend"
               class="h_fav">
            <p class="title">
              <span>为您推荐</span>
            </p>
            <van-skeleton :row="4"
                          :loading="initLoading">
              <div class="h_de"
                   v-for="(item, index) in info.recommend"
                   :key="index">
                <span class="h_dgrade">剩余分数<span>{{item.stock}}份</span></span>
                <p class="h_titles">{{item.name}}</p>
                <p class="h_counts">{{item.price}}<span class="h_unit">CNY/台</span></p>
                <span class="h_gb"
                      @click="goBay(item)">去购买</span>
              </div>
            </van-skeleton>
          </div>
        </van-pull-refresh>
      </div>
    </page-content>
  </page-view>
</template>

<script>
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';

export default {
  components: {
    PageView,
    PageContent
  },
  name: 'home',
  data () {
    return {
      list: [],
      user: null,
      initLoading: false,
      isLoading: false,
      info: {
        star: []
      }
    }
  },
  activated () {
    this.user = this.$store.state.user;
  },
  created () {
  },
  mounted () {
    this.initLoading = true;
    this.getData().then(e => {
      this.initLoading = false;
    });
  },
  methods: {
    banner (item) {
      // 点击banner
      this.$router.push({
        name: 'News',
        params: {
          content: item.content,
          title: item.title
        }
      })
    },
    login () {
      this.$router.push({
        path: '/login/0',
      })
    },
    //分享
    goShare () {
      this.$router.push({
        path: '/share',
      })
    },
    //==========
    goBay (item) {
      this.$router.push({
        name: 'ProductDetail',
        params: {
          id: item.id
        }
      })
    },
    goProduct (item) {
      item
      this.$router.push({
        name: 'Product',
        params: {
          type: item.category_id,
          deploy: 0
        }
      })
    },
    onRefresh () {
      this.isLoading = true;
      this.getData().then(e => {
        this.isLoading = false;
      });
    },
    getData () {
      return service.post('/apiHome.do', null, {
        hideloading: true
      }).then(response => {
        this.info = response.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  flex-flow: column;
  .h_header {
    width: 100%;
    min-height: 233px;
    background: #585df9;
    position: relative;
    overflow: hidden;
    z-index: -1;
    // .h-bac{
    //   width: 273px;
    //   height: 185px;
    //   background: red;
    //   position: absolute;
    //   right: 0;
    //   top: 0;
    //   background: url('../../assets/image/login/l_circle.png') center / contain no-repeat;
    //   background-size: cover;
    //   background-position: center;
    // }
  }
  .banner {
    width: 100%;
  }
  .h_t {
    width: 100%;
    height: 48px;
    margin: 31px 0 40px 20px;
  }
  .h_av {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 30px;
    display: inline-block;
    vertical-align: middle;
  }
  .h_log {
    height: 48px;
    line-height: 48px;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #ffffff;
    margin-left: 7px;
  }
  .h_nav {
    // width: 100vw;
    height: 70px;
    padding: 0 23px;
    display: flex;
    // justify-content: space-between;
    overflow: hidden;
    overflow-x: auto;
    .h_detail {
      min-width: 25%;
      height: 70px;
      text-align: center;
      .h_icon {
        width: 42px;
        height: 42px;
      }
    }
    p {
      text-align: center;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      color: #ffffff;
      margin: 0;
      margin-top: 8px;
    }
  }
  .h_conent {
    flex: 1;
    padding: 15px 23px 20px 23px;
    margin-top: -15px;
    border-top-left-radius: 19px;
    border-top-right-radius: 19px;
    background: #ffffff;
    overflow: auto;
    z-index: 10;
    .banner-swipe {
      border-radius: 19px;
      overflow: hidden;
    }
    .banner-swipe .van-swipe-item {
      width: 100%;
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      height: 123px;
    }
    .h_fav {
      width: 100%;
      .title {
        height: 31px;
        line-height: 31px;
        font-size: 14px;
        font-weight: 400;
        color: #16183b;
      }
      span {
        vertical-align: middle;
        display: inline-block;
      }
      .h-fire {
        margin-top: 6px;
        margin-left: 5px;
      }
      .h-d {
        width: 27px;
        height: 5px;
        float: right;
        margin-top: 8px;
      }
    }
    .h_details {
      border: 9px solid #5885f9;
      border-radius: 19px;
      margin-bottom: 10px;
      .h_title {
        padding: 6px 14px 0 ;
        font-size: 14px;
        font-weight: 500;
        color: #3d3e54;
      }
      .labels {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
      }
      .h_type {
        display: flex;
        align-items: center;
        padding: 0 8px;
        margin: 5px 5px 0;
        height: 20px;
        line-height: 16px;
        border-radius: 10px;
        font-size: 10px;
        color: #ffffff;
        text-align: center;
        background: #585df9;
      }
      .h_pre {
        padding: 0 14px 10px;
        .h_count {
          height: 22px;
          line-height: 22px;
          font-weight: 600;
          color: #585df9;
          font-size: 16px;
          margin-top: 11px;
          .h_unit {
            font-weight: 400;
            color: #585df9;
            font-size: 10px;
            margin-left: 9px;
          }
        }
        .h_press {
          margin-top: 8px;
        }
        .h_grade {
          height: 14px;
          line-height: 14px;
          margin-top: 14px;
          text-align: right;
          color: #7a7886;
          font-size: 10px;
          span {
            color: #000;
          }
        }
      }
    }
  }
  .h_de {
    // width: 305px;
    height: 99px;
    background: linear-gradient(141deg, #ffd65a 0%, #ffda83 100%);
    border-radius: 10px;
    padding: 9px 10px 0 18px;
    position: relative;
    margin-bottom: 10px;
    .h_dgrade {
      height: 14px;
      line-height: 14px;
      position: absolute;
      right: 6px;
      top: 10px;
      span {
        color: #000;
      }
    }
    .h_titles {
      font-size: 14px;
      font-weight: 500;
      color: #3d3e54;
      margin-top: 16px;
    }
    .h_counts {
      margin-top: 14px;
      font-size: 16px;
      font-weight: 600;
      color: #585df9;
      span {
        font-size: 10px;
        font-weight: 400;
        color: #585df9;
        margin-left: 7px;
      }
    }
    .h_gb {
      display: inline-block;
      width: 74px;
      height: 29px;
      background: #585df9;
      border-radius: 15px;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      line-height: 29px;
      text-align: center;
      position: absolute;
      right: 10px;
      top: 55px;
    }
  }
}
</style>
